<template>
	<view>
		<u-gap height="30"></u-gap>
		<view class="wrapper font-32 font-bold">
			{{title}}
		</view>
		<u-gap height="30"></u-gap>
		<view class="wrapper g_textarea_min_height">
			<u--textarea v-model="form.content" placeholder="Please enter" :customStyle="textareaCustomStyle" border="none"
				fontSize="12px" :autoHeight="true" count maxlength="1000"></u--textarea>
		</view>
		<u-gap height="30"></u-gap>
		<view class="fixed-bottom-box" style="width: 426upx;margin: 0 auto;">
			<u-button type="primary" size="large" text="SUBMIT" @click="submit"></u-button>
			<u-gap height="30"></u-gap>
		</view>
		<u-gap height="15"></u-gap>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					content: ''
				},
				textareaCustomStyle:{
					boxShadow: '0px 8upx 124upx 0px rgba(153, 171, 198, 0.18)',
					borderRadius: '40upx',
					padding:'20upx 40upx'
				},
				fieldName:'',
				title:''
			}
		},
		methods: {
			submit() {
				if(!this.form.content){
					uni.$u.toast('please enter');
					return;
				}
				let data = {
					key:this.fieldName,
					value:this.form.content
				};
				uni.$emit('form_update',data);
				this.navBack();
			},
			getData() {

			}
		},
		onReady() {
			
		},
		onShow() {
			uni.$off('refresh_edit');
			uni.$once('refresh_edit', (v) => {
				this.getData();
			})
		},
		onLoad(d) {
			this.fieldName = d.fieldName;
			this.form.content = d.value;
			
			if(this.fieldName == 'personalStrengths'){
				this.title = 'Personal advantage';
			}
			if(this.fieldName == 'content'){
				this.title = 'Self-Evaluation';
			}
			
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.getData();
		},
		onPullDownRefresh() {
			this.getData();
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss">
	/deep/.g_textarea_min_height{
		.u-textarea__field{
			min-height: 300upx;
			font-size: 12px;
		}
	}

</style>